<template>
	<view class="content">
		<!-- 座位區域 -->
		<view class="seatContent">
			<!-- 座位狀態 -->
			<view class="typeBox flexcenter">
				<view class="typeItem flexleft">
					<view class="selectType margin_right1"></view>
					<view class="text_pee color_six">可选</view>
				</view>
				<view class="typeItem flexleft">
					<view class="selectedType margin_right1"></view>
					<view class="text_pee color_six">{{type==0?"选中":"已售"}}</view>
				</view>
				<view class="flexleft">
					<view class="disSelectType margin_right1"></view>
					<view class="text_pee color_six">{{type==0?"不可选":"不可售"}}</view>
				</view>
			</view>
			<!-- 观影屏幕 -->
			<view class="flexcolumn margin_top7" v-if="type==0">
				<image class="filmBox" src="/static/images/index/film.png" mode=""></image>
				<view class="text_pee color_jiu">观影屏幕</view>
			</view>
			<!-- 座位 -->
			<view class="seatBox margin_top5 flex">
				<view class="arrange margin_right2 flex1">
					<view :class="index!=9?'margin_bottom3':''" v-for="(item,index) in 10">{{index+1}}</view>
				</view>
				<view>
					<scroll-view class="scrollBox white_nowrap" scroll-x>
						<view style="margin-top: 12rpx;" v-for="item in seatList">
							<view
								:class="value.state==1?'selected inline_block margin_right1':'select inline_block margin_right1'"
								v-for="value in item.childList" @click="selectSeat(value)"></view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
		<!-- 電影票、演唱會信息 -->
		<view class="voteBox ffffff">
			<view class="mainpadding">
				<view class="text_w color_ling">八角笼中</view>
				<view class="flexleft margin_top2" v-if="type==0">
					<view class="text_b color_jiu margin_right3">今天9月06日</view>
					<view class="text_b color_jiu margin_right3">10:05-12:49</view>
					<view class="text_b color_jiu">國語2D·10號厅</view>
				</view>
				<view class="flexleft margin_top" v-if="type==1">
					<view class="text_pee color_jiu margin_right2">2023-09-09 周六 19:30</view>
					<view class="nowRegion">当前分區：A1</view>
				</view>
				<view class="margin_top5 flexleft flex_wrap">
					<view class="voteItem flexleft">
						<view class="margin_right4">
							<view class="text_five color_ling">5排 6座</view>
							<view class="text_five color_orange">$39</view>
						</view>
						<view class="voteDelete"></view>
					</view>
				</view>
			</view>
			<view class="margin_top flexbetween mainpadding line_top">
				<view class="total_price">$78</view>
				<view class="confirmSeat" @click="confirmSeat">確認选座</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type:0,//0電影票 1演唱會
				seatList: [{
					id: 1,
					childList: [{
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, ]
				}, {
					id: 1,
					childList: [{
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, ]
				}, {
					id: 1,
					childList: [{
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, ]
				}, {
					id: 1,
					childList: [{
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, ]
				}, {
					id: 1,
					childList: [{
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, ]
				}, {
					id: 1,
					childList: [{
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, ]
				}, {
					id: 1,
					childList: [{
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, ]
				}, {
					id: 1,
					childList: [{
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, ]
				}, {
					id: 1,
					childList: [{
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, ]
				}, {
					id: 1,
					childList: [{
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, {
						state: 0, //0可选 1选中 2不可选
					}, ]
				}, ]
			}
		},
		onLoad(options) {
			this.type=options.type
		},
		methods: {
			selectSeat(value) {
				value.state = value.state == 0 ? 1 : 0
			},
			confirmSeat() { //確認选座
				uni.navigateTo({
					url: "./confirmSeat?type="+this.type
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding-bottom: 430rpx;
	}

	.seatContent {
		padding: 50rpx 30rpx;
		box-sizing: border-box;
		overflow: hidden;
	}

	.typeItem {
		margin-right: 100rpx;
	}

	// 可选狀態
	.selectType {
		width: 26rpx;
		height: 26rpx;
		background: #FFFFFF;
		border-radius: 7rpx 7rpx 7rpx 7rpx;
		border: 1rpx solid #E7E7E7;
	}

	// 选中狀態
	.selectedType {
		width: 26rpx;
		height: 26rpx;
		background: rgba(255, 92, 0, 0.1);
		border-radius: 7rpx 7rpx 7rpx 7rpx;
		opacity: 1;
		border: 1rpx solid #FF5C00;
	}

	// 不可选狀態
	.disSelectType {
		width: 26rpx;
		height: 26rpx;
		background: #E4E4E4;
		border-radius: 7rpx 7rpx 7rpx 7rpx;
		opacity: 1;
		border: 1rpx solid #D4D4D4;
	}

	.filmBox {
		width: 350rpx;
		height: 70rpx;
	}

	.seatBox {
		position: relative;

		.arrange {
			width: 32rpx;
			text-align: center;
			padding: 20rpx 0;
			box-sizing: border-box;
			background: rgba(0, 0, 0, .3);
			border-radius: 47rpx 47rpx 47rpx 47rpx;
			font-size: 22rpx;
			font-family: PingFang SC-Heavy, PingFang SC;
			font-weight: 800;
			color: #FFFFFF;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 99;
		}

		// 可选
		.select {
			width: 40rpx;
			height: 40rpx;
			background: #FFFFFF;
			border-radius: 7rpx 7rpx 7rpx 7rpx;
			border: 1rpx solid #E7E7E7;
		}

		// 选中
		.selected {
			width: 40rpx;
			height: 40rpx;
			background: rgba(255, 92, 0, 0.1);
			border-radius: 7rpx 7rpx 7rpx 7rpx;
			opacity: 1;
			border: 1rpx solid #FF5C00;
		}

		// 不可选
		.disSelect {
			width: 40rpx;
			height: 40rpx;
			background: #E4E4E4;
			border-radius: 7rpx 7rpx 7rpx 7rpx;
			opacity: 1;
			border: 1rpx solid #D4D4D4;
		}

		.scrollBox {
			padding-left: 52rpx;
			width: calc(100vw - 90rpx);
		}
	}

	// 電影票、演唱會信息
	.voteBox {
		width: 100%;
		margin-top: 100rpx;
		border-radius: 30rpx 30rpx 0rpx 0rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 999;
		box-sizing: border-box;

		.voteItem {
			// width: 200rpx;
			// height: 86rpx;
			padding: 10rpx 30rpx;
			box-sizing: border-box;
			background: #F8F8F9;
			border-radius: 15rpx 15rpx 15rpx 15rpx;
		}

		.voteDelete {
			width: 20rpx;
			height: 20rpx;
			background-image: url("/static/images/index/voteDelete.png");
			background-size: 100% 100%;
		}
		.nowRegion {
			width: 167rpx;
			height: 39rpx;
			line-height: 39rpx;
			text-align: center;
			border-radius: 3rpx 3rpx 3rpx 3rpx;
			border: 1rpx solid #B8B8B8;
			font-size: 20rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #B8B8B8;
		}
	}

	.total_price {
		font-size: 42rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #FF5C00;
	}

	.confirmSeat {
		width: 214rpx;
		height: 69rpx;
		line-height: 69rpx;
		text-align: center;
		background: #FFB800;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
	}

</style>